<template>
	<view class="other" v-if="loginConfig?.loginTypes?.length>1">
		<view class="other_top">快捷登录</view>
		<view class="fab-login-box">
			<view class="item" v-for="(item, index) in servicesList" :key="index" @click="item.path ? toPage(item.path) : login_before(item.id, false)">
				<image class="logo" :src="item.logo" mode="scaleToFill"></image>
				<text class="login-title">{{ item.text }}</text>
			</view>
		</view>
		<uni-id-agreements v-if="!loginPage" class="agreements-box" scope="register" ref="agreementsRef"></uni-id-agreements>
	</view>
</template>

<script setup name="BaseLogin">
	/**
	 * @name   
	 */
	import { ConfigStore } from "@/store/modules/config.js"
	import { ref, reactive, computed } from 'vue'
	import config from '@/config/config.js'
	import { useUniverify } from "@/hooks/useUniverify"
	// 获取路由地址
	import pagesJson from '@/pages.json'
	// * 可登录方式
	let servicesList = ref([{
			"id": "username",
			"text": "账号登录",
			"logo": "/static/login/user.png",
			"path": "/pages/entrance/login/login"
		},
		{
			"id": "smsCode",
			"text": "短信登录",
			"logo": "/static/login/sms.png",
			"path": "/pages/entrance/smsCode/smsCode"
		},
		{
			"id": "weixin",
			"text": "微信登录",
			"logo": "/static/login/weixin.png",
			"path": "/pages/entrance/wxLogin/wxLogin"
		},
		// #ifndef MP-WEIXIN
		{
			"id": "apple",
			"text": "苹果登录",
			"logo": "/static/login/apple.png",
		},
		{
			"id": "univerify",
			"text": "一键登录",
			"logo": "/static/login/univerify.png",
		}
		// #endif
	])

	// * 获取当前页面的路由
	const getRoute = (n = 0) => {
		let pages = getCurrentPages();
		if (n > pages.length) {
			return ''
		}
		return '/' + pages[pages.length - n].route
	}

	//  如果是登录页不显示用户协议
	const loginPage = computed(() => '/' + pagesJson.uniIdRouter?.loginPage == getRoute(1))
	const loginConfig = computed(() => ConfigStore().config)
	// * 初始化登录环境
	const initLogin = () => {
		// 过滤登录环境
		servicesList.value = servicesList.value.filter(item => {
			// #ifndef APP
			//非app端去掉apple登录
			if (item.id == 'apple') return false
			// #endif

			// #ifdef APP
			//去掉非ios系统上的apple登录
			if (item.id == 'apple' && uni.getSystemInfoSync().osName != 'ios') return false
			// #endif

			// * 去除掉配置项中不存在的登录方式
			// return config.loginTypes.includes(item.id) //config配置
			return loginConfig?.value?.loginTypes?.includes(item.id) //动态获取的配置
		})

		//去掉当前页面对应的登录选项
		servicesList.value = servicesList.value.filter(item => {
			let path = item.path || '';
			return path != getRoute(1)
		})
	}
	initLogin()


	// 跳转登录页面
	const toPage = (path) => {
		uni.navigateTo({ url: path });
	}

	// 一键登录逻辑
	const { univerifyLogin } = useUniverify()
	const login_before = (type) => {
		if (type == 'univerify') {
			univerifyLogin()
		}
	}



	// * 传参参数
	const props = defineProps({
		content: {
			type: String,
			require: false,
			default: '默认值'
		},
	})

	const agreementsRef = ref(null) // 隐私协议实例
	// * 统一暴露属性
	defineExpose({
		agreements: agreementsRef
	})
</script>

<style lang="scss" scoped>
	.other {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.other_top {
		text-align: center;
		width: 100%;
		color: var(--fui-color-label);
		font-size: 24rpx;
	}

	.other_top::before {
		content: '';
		width: 50rpx;
		height: 0.5rpx;
		background-color: var(--fui-color-label);
		display: inline-block;
		margin-right: 20rpx;
		vertical-align: middle;
	}

	.other_top::after {
		content: '';
		width: 50rpx;
		height: 0.5rpx;
		background-color: var(--fui-color-label);
		display: inline-block;
		margin-left: 20rpx;
		vertical-align: middle;
	}

	/* #ifndef APP-NVUE */
	.fab-login-box,
	.item {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
	}

	/* #endif */

	.fab-login-box {
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
		justify-content: space-around;
	}


	.agreements-box {
		position: fixed;
		bottom: 50rpx;
	}

	.item {
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 150rpx;
		cursor: pointer;
	}

	/* #ifndef APP-NVUE */
	@media screen and (min-width: 690px) {
		.fab-login-box {
			max-width: 500px;
			margin-left: calc(50% - 250px);
		}

		.item {
			height: 160rpx;
		}
	}

	@media screen and (max-width: 690px) {

		/* #ifdef APP-PLUS */
		.fab-login-box {
			bottom: 160rpx;
		}

		/* #endif */

		/* #ifdef H5*/
		.fab-login-box {
			bottom: 10rpx;
		}

		/* #endif */
	}

	/* #endif */

	.logo {
		width: 80rpx;
		height: 80rpx;
		max-width: 60px;
		max-height: 60px;
		border-radius: 100%;
		border: solid 1px #F6F6F6;
	}

	.login-title {
		text-align: center;
		margin-top: 6px;
		color: #999;
		font-size: 10px;
		width: 70px;
	}
</style>